/** @format */

@use './var/color' as COLOR;
@use './var/border' as BORDER;
@use './var/button' as BUTTON;

.b-form {
    &.form-inline {
        display: flex;
        flex-wrap: wrap;
        margin-right: -10px;
        margin-left: -10px;

        & > .form-group {
            display: flex;
            flex: none;
            align-items: center;
            padding: 0 10px;

            & > .form-label {
                margin: 0 1rem;
            }
        }
    }

    .form-group {
        margin-bottom: 1rem;

        & > .form-label {
            margin-bottom: 0.5rem;
        }
    }

    .form-content {
        position: relative;
        box-sizing: border-box;

        input,
        button,
        select,
        textarea {
            width: 100%;
            padding: 0.375rem 0.75rem;
            line-height: 1.5;
            color: var(--text-color);
            background-color: #fff;
            border: 1px solid var(--border-color);
            border-radius: BUTTON.$btn-border-radius;
            appearance: none;

            &::placeholder {
                color: var(--text-color-4);
            }

            &:focus:not(:focus-visible),
            &:focus {
                outline: 0;
            }

            &:focus {
                border-color: var(--color-primary-light-3);
                box-shadow: 0 0 0 0.15rem rgba(COLOR.$color-primary, 0.2);
            }
        }

        &.disabled {
            &::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1;
                cursor: not-allowed;
                content: '';
            }

            input,
            button,
            select,
            textarea,
            label {
                pointer-events: none;
            }
        }
    }

    .b-select {
        position: relative;

        select {
            appearance: none;
            padding-right: 2rem;
        }

        &::after {
            position: absolute;
            top: 50%;
            right: 0.75rem;
            font-size: 1rem;
            line-height: 1;
            content: '>';
            transform: translateY(-50%) rotate(90deg);
        }

        &:has(select[multiple])::after {
            content: '';
        }
    }

    .form-checkbox {
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;

        &::before {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 15px;
            height: 15px;
            margin-right: 10px;
            font-size: 12px;
            content: '';
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: BUTTON.$btn-border-radius;
        }

        &:has(input[type='radio'])::before {
            border-radius: 50%;
        }

        &:has(input:checked)::before {
            color: #fff;
            content: '√';
            background: var(--color-primary);
            border-color: var(--color-primary);
        }
    }
}
